<template>
	<view class="" style="background: #FFF;    min-height: 100vh;">
		<view class="mainBox">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="userInfo.realName" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.realName" border="none" placeholder="请输入姓名"></u--input>
				</u-form-item>
				<u-form-item label="手机" prop="userInfo.phone" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.phone" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<!-- <u-form-item label="邮箱" prop="userInfo.email" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.email" border="none" placeholder="请输入邮箱"></u--input>
				</u-form-item> -->
				<u-form-item
					label="参赛类型"
					prop="userInfo.email"
					borderBottom
					@click="
						showCate = true;
						hideKeyboard();
					"
					ref="item1"
				>
					<u--input v-model="model1.userInfo.email" border="none" disabled disabledColor="#ffffff" placeholder="请选择参赛类型"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item
					label="性别"
					prop="userInfo.sex"
					borderBottom
					@click="
						showSex = true;
						hideKeyboard();
					"
					ref="item1"
				>
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="学生证号" prop="userInfo.idNumber" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.idNumber" border="none" placeholder="请输入学生证号"></u--input>
				</u-form-item>
				<u-form-item label="身份证号" prop="userInfo.cardNumber" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.cardNumber" border="none" placeholder="请输入身份证号"></u--input>
				</u-form-item>

				<u-form-item
					label="入学时间"
					prop="userInfo.inTime"
					borderBottom
					@click="
						showBirthday = true;
						hideKeyboard();
					"
					ref="item1"
				>
					<u--input v-model="model1.userInfo.inTime" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>

			<u-button @click="submit">开始报名</u-button>
			<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect"></u-action-sheet>
			<u-action-sheet :show="showCate" :actions="cates" title="请选择参赛类型" @close="showCate = false" @select="cateSelect"></u-action-sheet>

			<u-datetime-picker
				:show="showBirthday"
				:value="birthday"
				mode="date"
				closeOnClickOverlay
				@confirm="birthdayConfirm"
				@cancel="birthdayClose"
				@close="birthdayClose"
			></u-datetime-picker>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showSex: false,
			showBirthday: false,
			showCate: false,
			model1: {
				userInfo: {
					realName: '',
					phone: '',
					email: '',
					idNumber: '',
					cardNumber: '',
					sex: '',
					inTime: '',
					id: ''
				}
			},
			actions: [
				{
					name: '男'
				},
				{
					name: '女'
				}
			],
			cates: [
				{
					name: '数学专业'
				},
				{
					name: '非数学专业'
				}
			],
			rules: {
				'userInfo.realName': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.phone': {
					type: 'string',
					required: true,
					message: '请填写手机号',
					trigger: ['blur', 'change']
				},
				// 'userInfo.email': {
				// 	type: 'string',
				// 	required: true,
				// 	message: '请填写邮箱',
				// 	trigger: ['blur', 'change']
				// },
				'userInfo.email': {
					type: 'string',
					required: true,
					message: '请选择参赛类型',
					trigger: ['blur', 'change']
				},
				'userInfo.idNumber': {
					type: 'string',
					required: true,
					message: '请填写学生证号',
					trigger: ['blur', 'change']
				},
				'userInfo.cardNumber': {
					type: 'string',
					required: true,
					message: '请填写身份证号',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				},
				'userInfo.inTime': {
					type: 'string',
					required: true,
					message: '请选择入学时间',
					trigger: ['change']
				}
			},
			radio: '',
			switchVal: false
		};
	},

	onReady() {
		//onReady 为uni-app支持的生命周期之一
		this.$refs.uForm.setRules(this.rules);
		const Id = uni.getStorageSync('Id');
		if (Id) {
			this.model1.userInfo.id = Id;
		}
	},

	onLoad(item) {},

	methods: {
		sexSelect(e) {
			this.model1.userInfo.sex = e.name;
			this.$refs.uForm.validateField('userInfo.sex');
		},
		cateSelect(e) {
			this.model1.userInfo.email = e.name;
			this.$refs.uForm.validateField('userInfo.email');
		},

		hideKeyboard() {
			uni.hideKeyboard();
		},

		// 生日选择关闭时校验生日格式以及是否为空
		birthdayConfirm(e) {
			this.showBirthday = false;
			this.model1.userInfo.inTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
			this.$refs.form1.validateField('userInfo.inTime');
		},
		// 生日列表关闭时校验是否为空
		birthdayClose() {
			this.showBirthday = false;
			this.$refs.form1.validateField('userInfo.inTime');
		},
		submit() {
			this.$refs.uForm
				.validate()
				.then(res => {
					this.$http({
						url: 'contest/addInformation',
						method: 'POST',
						data: this.model1.userInfo
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '恭喜您，报名成功',
								icon: 'none',
								duration: 2000
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 2000);
						}
					});
				})
				.catch(errors => {
					uni.$u.toast('校验失败');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.mainBox {
	padding: 26rpx 32rpx;

	::v-deep .u-form-item__body__left {
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #27282e;
		width: 144rpx !important;
	}

	::v-deep .u-input__content__field-wrapper__field {
		text-align: right !important;
	}

	::v-deep .u-form-item__body {
		padding: 20rpx 0rpx !important;
	}

	::v-deep .u-button--info {
		margin-top: 44rpx !important;

		height: 104rpx !important;
		background: #3b72ec;
		border-radius: 4rpx;
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff !important;
	}
}
</style>
